<template>
<view>
		<view class="next_content">
			<view class="top_list">
				<view class="list_content" :class="bg_active === index ? 'is_bg_active' : '' "
					:style="bg_active === index ? 'backgroundColor:#FFF6F6' : 'backgroundColor:#e3e3e3'"
					v-for="(item,index) in list_number" :key="index" @click="handleAlllist(item,index)">
					<view class="left_close">
						<image src="../../../static/image/icon-close.png" class="close_img"
							@click.stop="handleDel(item,index)"></image>
					</view>
					<view class="middle_red">
						<view class="dragging_num">
							<view class="dra_item" v-for="(item, index) in list_number[index].red_drag">{{ item }}</view>
							<text style="font-size: 14px;margin-left: 5px;color: #a5a5a5;" v-show="list_number[index].red_drag.length > 0">(胆)</text>
						</view>
						<view class="red_nums">
							<view class="red_all_nums" v-for="(item, index) in list_number[index].red">{{ item }}</view>
						</view>
					</view>
					<view class="add">+</view>
					<view class="middle_blue">
						<view class="blue_nums">
							<view class="blue_all_nums" v-for="(item,index) in list_number[index].blue">{{ item }}</view>
						</view>
					</view>
					<view class="beilv">
						<view class="beilv_content" @click="handleAddMultiplier(item,index)">{{ item.num }}倍</view>
					</view>
				</view>
			</view>
			<view class="btn_list">
				<view class="btn" @click="handleAdd">再加一注</view>
				<view class="btn">机选</view>
				<!-- <view class="btn">幸运号</view> -->
			</view>
			<view class="next_top">
				<view class="next_top_left">
					<view class="left_btn" v-if="uniShow === 1" @click="handleChooseDM">{{ unionText }}</view>
					<view class="left_change_btn" v-else @click="handleOutunion">退出胆拖</view>
				</view>
				<view class="next_top_right">{{ text }}</view>
			</view>
			<view class="red_ball">红球:</view>
			<view class="red_list">
				<view
					:class="{ 'isNormalRed':item.selected == false, 'isRedactive':item.selected == true , 'isUnionactive': item.selected == 'union'}"
					@click="handleChooseredball(item,index)" v-for="(item,index) in red_ball_list" :key="index">
					{{ item.name }}
				</view>
			</view>
			<view class="red_blue">蓝球:</view>
			<view class="blue_list">
				<view :class="item.selected == true ? 'isblueactive' : 'isNormalblue' "
					@click="handleChooseblueball(item,index)" v-for="(item,index) in blue_ball_list" :key="index">
					{{ item.name }}
				</view>
			</view>

			<view class="save" @click="handleSave">保存</view>
			</view>
			
			<u-modal :content="content" :show="showDel" showCancelButton @confirm="confirm" @cancel="cancel"
				confirmColor="#FA254F"></u-modal>
			<u-modal :show="showMultiplier" showCancelButton @confirm="Multiplierconfirm" @cancel="showMultipliercancel"
				confirmColor="#FA254F">
			
				<view class="list_step">
					<view class="step_text">当前注的倍率</view>
					<view class="step_content">
						<u-number-box v-model="numberValue" button-size="40" color="#ffffff" bgColor="#FA254F"
							iconStyle="color: #fff" @change="valChange"></u-number-box>
					</view>
				</view>
			
			</u-modal>
			<u-toast ref="uToast" />
			<u-toast ref="unionToast" />
			<u-toast ref="unionToastattion" />
</view>
</template>

<script>
	export default {
		props:['parentunionlottoData'],
		data(){
			return {
				text: '单式',
				unionText: '选胆码',
				content: '是否确认删除，删除后无法恢复！谨慎操作',
				delindex:'',
				uniShow: 1,
				bg_active: 0,
				showDel: false,
				showMultiplier: false,
				numberValue: 1,
				red_ball_list:[],
				blue_ball_list:[],
				list_number: [{
					type: 1,
					periods: '0',
					red_drag: [],
					red: [],
					blue: [],
					blue_drag: [],
					num: 1,
					model: ''
				}]
			}
		},
		created() {
			for (var i = 0; i <= 32; i++) {
				this.red_ball_list.push({
					name: this.formatNumber(i + 1),
					selected: false
				})
			}
			for (let i = 0; i <= 15; i++) {
				this.blue_ball_list.push({
					name: this.formatNumber(i + 1),
					selected: false
				})
			}
			if(this.parentunionlottoData.length === 0) return
			this.list_number = this.parentunionlottoData.map(item => {
				return {
					...item,
					type:1,
					model:'',
					num:1,
					periods:'0'
				}
			})
			this.red_ball_list.forEach(item => {
				if (this.list_number[0].red.includes(item.name)) {
					item.selected = true
				}
				if(this.list_number[0].red_drag.includes(item.name)) {
					item.selected = 'union'
				}
			});
			this.blue_ball_list.forEach(item => {
				if (this.list_number[0].blue.includes(item.name)) {
					item.selected = true
				}
			})
		},
		methods:{
			formatNumber(num) {
			    return num < 10 ? '0' + num : num.toString();
			},
			handleOutunion() {
				this.uniShow = 1
				this.chooseunion = 0
				this.text = '单式'
			},
			handleChooseDM() {
				if (this.list_number.length > 1) {
					this.$refs.uToast.show({
						type: 'default',
						message: '胆拖模式下，只能选择一注.', 
					})
					return
				}
			
				this.chooseunion = 1
				this.text = '胆拖模式，点击选择胆码'
				this.uniShow = 0
			},
			handleAdd() {
				const is_add = 0;
				this.list_number.forEach(item => {
					const minForntNum = 6
					const minBackNum = 1
			
					if (item.red.length + item.red_drag.length < minForntNum) {
						//红球数量大于5个
						this.$refs.uToast.show({
							type: 'default',
							message: '红球数量大于6个',
						})
						is_add = 1;
						return;
					}
					if (item.blue.length + item.blue_drag.length < minBackNum) {
						//蓝球数量大于2个
						this.$refs.uToast.show({
							type: 'default',
							message: '蓝球数量大于1个',
						})
						is_add = 1;
						return;
					}
			
			
					if (item.red_drag.length > minForntNum - 1) {
						//红球胆拖球上数量不能大于4个
						this.$refs.uToast.show({
							type: 'default',
							message: '红球胆拖球上数量不能大于5个',
						})
						is_add = 1;
						return;
					}
			
			
					if (this.chooseunion === 1 || this.list_number[0].red_drag.length > 0) {
						this.$refs.unionToastattion.show({
							type: 'default',
							message: '胆码模式下只能选择一注',
						})
						is_add = 1;
						return;
					}
					this.red_ball_list.forEach(item => {
						item.selected = false;
					});
					this.blue_ball_list.forEach(item => {
						item.selected = false;
					});
				
					
				})
				
				if(!is_add){
					this.list_number.push({
						type: 1,
						periods: '0',
						red_drag: [],
						red: [],
						blue: [],
						blue_drag: [],
						num: 1,
						model: ''
					})
					this.bg_active = this.list_number.length - 1
				}
			},
			handleAlllist(item1, index) {
				this.bg_active = index
				this.red_ball_list.forEach(item => {
					item.selected = false
				})
				this.blue_ball_list.forEach(item => {
					item.selected = false
				})
				this.red_ball_list.forEach(item => {
					if (item1.red.includes(item.name)) {
						item.selected = true
					}
				});
				this.blue_ball_list.forEach(item => {
					if (item1.blue.includes(item.name)) {
						item.selected = true
					}
				})
			},
			handleChooseblueball(item, index) {
				item.selected = !item.selected
				const index2 = this.list_number[this.bg_active].blue.indexOf(item.name)
				if (index2 !== -1) {
					this.list_number[this.bg_active].blue.splice(index2, 1)
				} else {
					this.list_number[this.bg_active].blue.push(item.name)
				}
			},
			handleChooseredball(item, index) {
				if (this.chooseunion === 1) {
					item.selected = 'union'
					const index3 = this.list_number[this.bg_active].red_drag.indexOf(item.name)
					if (index3 !== -1) {
						item.selected = ''
						this.list_number[this.bg_active].red_drag.splice(index3, 1)
					} else {
						if (this.list_number[this.bg_active].red_drag.length <= 4) {
							this.list_number[this.bg_active].red_drag.push(item.name)
							const index5 = this.list_number[this.bg_active].red.indexOf(item.name)
							if (index5 !== -1) {
								this.list_number[this.bg_active].red.splice(index5, 1)
							}
						} else {
							item.selected = ''
							this.$refs.unionToast.show({
								type: 'default',
								message: '红球胆码不能超过五个',
							})
						}
					}
				} else {
					item.selected = !item.selected
					const index1 = this.list_number[this.bg_active].red.indexOf(item.name)
					const index4 = this.list_number[this.bg_active].red_drag.indexOf(item.name)
					if (index4 !== -1) {
						this.list_number[this.bg_active].red_drag.splice(index4, 1)
					}
					if (index1 !== -1) {
						this.list_number[this.bg_active].red.splice(index1, 1)
						if(this.list_number[this.bg_active].red.length < 6){
							this.text = '单式'
						}
					} else {
						item.selected = true
						this.list_number[this.bg_active].red.push(item.name)
						if(this.list_number[this.bg_active].red.length === 6){
							this.text = '单式'
						}
						if(this.list_number[this.bg_active].red.length > 6){
							this.text = '复式'
						}
						
					}
				}
			},
			handleDel(item, index) {
				if(this.list_number.length === 1){
					this.$refs.unionToast.show({
						type: 'default',
						message: '要求必须有一注',
					})
					return
				}
				this.showDel = true
				this.delindex = index
			},
			confirm() {
				this.list_number.splice(this.delindex, 1)
				this.bg_active = this.list_number.length - 1
				this.red_ball_list.forEach(item => {
					item.selected = false
				})
				this.blue_ball_list.forEach(item => {
					item.selected = false
				})
				this.red_ball_list.forEach(item => {
					if (this.list_number[this.bg_active].red.includes(item.name)) {
						item.selected = true
					}
				});
				this.blue_ball_list.forEach(item => {
					if (this.list_number[this.bg_active].blue.includes(item.name)) {
						item.selected = true
					}
				})
				this.showDel = false
			},
			cancel() {
				this.showDel = false
			},
			handleAddMultiplier(item, index) {
				this.showMultiplier = true
				this.stepIndex = index
			},
			Multiplierconfirm() {
				this.showMultiplier = false
				this.list_number[this.stepIndex].num = this.numberValue
				this.numberValue = 1
			},
			showMultipliercancel() {
				this.showMultiplier = false
			},
			valChange(e) {
				this.numberValue = e.value
			},
			async handleSave() {
				let params = this.list_number
				let res = await this.$api.inheadlottery(params)
				if(res.code === 0 ){
					this.$refs.uToast.show({
						type: 'default',
						message: res.msg,
					})
				}
				if(res.code === 1 ){
					this.$refs.uToast.show({
						type: 'success',
						message: res.msg,
					})
				}
			}
		}
	}
</script>

<style lang="scss">

		.next_content {
			width: 346px;
			margin: 0 auto;
			margin-top: 35px;
			margin-bottom: 20px;
			box-sizing: border-box;
			padding: 10px;
			background-color: $white_color;
			border-radius: $radius_eight;

			.next_top {
				width: 100%;
				height: 45px;
				display: flex;

				.next_top_left {
					flex: 0.3;

					.left_btn {
						width: 88px;
						height: 32px;
						border: 1px solid $primary_color;
						text-align: center;
						line-height: $line-height-32;
						color: $primary_color ;
						border-radius: $radius_16;
					}

					.left_change_btn {
						width: 88px;
						height: 32px;
						border: 1px solid $primary_color;
						text-align: center;
						line-height: $line-height-32;
						color: $white_color ;
						border-radius: $radius_16;
						background: linear-gradient(to right, #FF5A43, #FA2450)
					}
				}

				.next_top_right {
					flex: 0.7;
					text-align: right;
					line-height: $line-height-32;
					font-weight: bold;
					color: $primary_color;
				}
			}

			.red_ball {
				width: 100%;
				height: 30px;
				line-height: $line-height-30;
				font-size: $font-size-14;
				box-sizing: border-box;
				padding-left: 10px;
				color: $primary_color;

				.red_more {
					margin-left: 5px;
					color: $gray_color;
				}
			}

			.red_list {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.isRedactive {
					width: 30px;
					height: 35px;
					border-radius: 50%;
					margin-left: 5px;
					margin-top: 10px;
					text-align: center;
					line-height: 27px;
					color: $white_color;
					font-weight: bold;
					font-size: $font-size-12;
					background-image: url('../../../static/image/red_ball.png');
					background-size: 100% 100%;

				}

				.isNormalRed {
					width: 25px;
					height: 25px;
					border-radius: 50%;
					background-color: $qgray_color;
					border: 1px solid $gray_color;
					margin-left: 10px;
					margin-top: 10px;
					text-align: center;
					line-height: $line-height-25;
					color: $black_color;
					font-weight: bold;
					font-size: $font-size-12;
				}

				.isUnionactive {
					width: 30px;
					height: 35px;
					border-radius: 50%;
					margin-left: 10px;
					margin-top: 10px;
					text-align: center;
					line-height: 27px;
					color: $white_color;
					font-weight: bold;
					font-size: $font-size-12;
					background-image: url('../../../static/image/z_text_ball.png');
					background-size: 100% 100%;
				}
			}

			.red_blue {
				width: 100%;
				height: 30px;
				line-height: $line-height-30;
				font-size: $font-size-14;
				box-sizing: border-box;
				padding-left: 10px;
				margin-top: 10px;
				color: blue;

				.red_more {
					margin-left: 5px;
					color: $gray_color;
				}
			}

			.blue_list {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.isblueactive {
					width: 30px;
					height: 35px;
					border-radius: 50%;
					margin-left: 5px;
					margin-top: 10px;
					text-align: center;
					line-height: 27px;
					color: $white_color;
					font-weight: bold;
					font-size: $font-size-12;
					background-image: url('../../../static/image/blue_ball.png');
					background-size: 100% 100%;

				}

				.isNormalblue {
					width: 25px;
					height: 25px;
					border-radius: 50%;
					background-color: $qgray_color;
					border: 1px solid $gray_color;
					margin-left: 10px;
					margin-top: 10px;
					text-align: center;
					line-height: $line-height-25;
					color: $black_color;
					font-weight: bold;
					font-size: $font-size-12;
				}
			}

			.save {
				width: 95%;
				height: 36px;
				margin: 0 auto;
				margin-top: 20px;
				border-radius: $radius_30;
				text-align: center;
				line-height: 36px;
				color: $white_color;
				font-size: $font-size-14;
				font-weight: bold;
				background: linear-gradient(to right, #FF5A42, #F92350)
			}

			.top_list {
				width: 95%;
				height: 200px;
				margin: 0 auto;
				border-radius: $radius_four;
				box-sizing: border-box;
				padding: 10px;
				overflow: auto;
				scrollbar-width: none;
				/* Firefox */
				-ms-overflow-style: none;

				/* IE10+ */
				&::-webkit-scrollbar {
					display: none;
					/* ChromeSafari */
				}

				// .is_bg_active{
				// 	background-color: green;
				// }
				.list_content {
					width: 100%;
					// background-color: $qgray_color;
					box-sizing: border-box;
					padding: 10px;
					border-radius: $radius_eight;
					display: flex;
					margin-bottom: 10px;

					.left_close {
						flex: 0.1;
						@include centerAline();

						.close_img {
							width: 30px;
							height: 30px;
						}
					}

					.middle_red {
						flex: 0.55;

						.dragging_num {
							width: 100%;
							display: flex;
							flex-wrap: wrap;

							.dra_item {
								width: 25px;
								height: 30px;
								margin-left: 3px;
								text-align: center;
								line-height: 25px;
								font-weight: bold;
								background-image: url('../../../static/image/z_text_ball.png');
								background-size: 100% 100%;
								background-repeat: no-repeat;
								font-weight: bold;
								font-size: $font-size-12;
								color: $white_color;
							}
						}

						.red_nums {
							width: 100%;
							display: flex;
							flex-wrap: wrap;

							.red_all_nums {
								width: 25px;
								height: 30px;
								background-image: url('../../../static/image/red_ball.png');
								background-size: 95% 95%;
								color: $white_color;
								text-align: center;
								line-height: $line-height-25;
								font-weight: bold;
								font-size: $font-size-12;
								margin-left: 3px;
								margin-top: 3px;
							}

						}
					}

					.add {
						flex: 0.05;
						@include centerAline();
						font-size: $font-size-20;
						color: $gray_color;
					}

					.middle_blue {
						flex: 0.3;

						.blue_nums {
							width: 100%;
							display: flex;
							flex-wrap: wrap;

							.blue_all_nums {
								width: 25px;
								height: 30px;
								text-align: center;
								line-height: $line-height-25;
								font-weight: bold;
								font-size: $font-size-12;
								margin-left: 10px;
								background-image: url('../../../static/image/blue_ball.png');
								background-size: 100% 100%;
								color: $white_color;
							}
						}
					}

					.beilv {
						flex: 0.1;
						@include centerAline();

						.beilv_content {
							text-align: center;
							font-weight: bold;
							background-color: $primary_color;
							color: $white_color;
							border-radius: $radius_four;
							box-sizing: border-box;
							padding: 5px;
						}
					}
				}
			}

			.btn_list {
				width: 95%;
				margin: 0 auto;
				height: 60px;
				box-sizing: border-box;
				padding: 10px;
				display: flex;
				justify-content: space-around;

				.btn {
					width: 90px;
					height: 36px;
					background: linear-gradient(to right, #FF5A43, #FA2450);
					border-radius: $radius_30;
					text-align: center;
					line-height: $line-height-36;
					font-size: $font-size-14;
					color: $white_color;
				}
			}
		}

</style>